@use "palette" as p;
@use "images";

h1, h2, h3, h4 {
    font-family: p.$font-title;
    font-weight: bold;
}
  
h1 {
    font-size: 26px;
    text-shadow: none;
    padding-left: 0px;
    margin-left: 10px;
}

h2 {
    font-size: 20px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    margin-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

h3 {
    font-size: 16px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin-left: 0px;
    margin-right: 20px;
    padding-bottom: 5px;
    padding-left: 10px;
}

h4 {
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 7px;
    padding-left: 0px;
    margin-left: 0px;
}

b, strong {
    font-family: p.$font-strong;
    font-weight: 900;
    text-shadow: 0px 0px 0.1em #777777;
    letter-spacing: 1px;
}

i, em{
    font-family: p.$font-italic;
}

#main-title {
    font-family: p.$font-title;
}

.vp-feature-header {
    font-family: p.$font-title;
}

.vp-description {
    font-family: p.$font-title;
}

figure{
    margin-left: 0px;
    margin-right: 0px;
    
}

figcaption {
    font-size:12px;
    padding-top:5px;
    padding-bottom:5px;
    color:#606060;
    text-align: center;
}

figcaption code {
    background: inherit !important;
    color: #909090;
    padding: 2px;
}

[data-theme=light] figcaption code {
    color: #202020;
}

.centre-image {
    max-width: 100%;
    max-height: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

th {
    background-color: rgba(red(p.$theme-color), green(p.$theme-color), blue(p.$theme-color), 20%);
}

// custom styles

blockquote {
    border-color:p.$quote-color!important;
    color:p.$quote-color;
}

/*code:not(a) {
    background-color: rgba(red(p.$code-color), green(p.$code-color), blue(p.$code-color), 5%) !important;
    color: p.$code-color;
}*/
  
@media (min-width: 420px) {
    body {
      letter-spacing:.5px;
      font-size:16px!important
    }
    blockquote {
      border-width:0px;
      border-style:solid;
      border-radius:0px;
      border-left-width:5px;
      padding-left:10px;
      padding-right: 10px;
      background-color: rgba(red(p.$quote-color), green(p.$quote-color), blue(p.$quote-color), 5%) !important;
    }
    div[class*=language-].line-numbers-mode .line-number {
      line-height:unset!important
    }
    .line-numbers-mode {
      border-width:0px;
      border-left-width:5px;
      border-style: solid;
      border-radius: 0px!important;
      border-color: p.$code-color;
      color: p.$code-color;
      background-color: rgba(red(p.$code-color), green(p.$code-color), blue(p.$code-color), 5%) !important;
    }
}

/*// Make inlined `fixed width` text less distracting in dark mode
html[data-theme="dark"] code {
    background-color: rgba(red(p.$code-color), green(p.$code-color), blue(p.$code-color), 10%) !important;
    color: #d0d5d0;
}

// But lets not apply the above values to code blocks
html[data-theme="dark"] pre.language-text code {
    background-color: rgba(red(p.$code-color), green(p.$code-color), blue(p.$code-color), 0%) !important;
}*/

html[data-theme="dark"] ::marker {
    color: #666666;
}

::marker {
    color: #666666;
}


html[data-theme="light"] img.vp-hero-image {
   content: url("/murex-term-light.png"); 
}
html[data-theme="dark"] img.vp-hero-image {
   content: url("/murex-term-dark.png"); 
}



html[data-theme="light"] img.banner-tour {
   content: url("/banner-tour-light.png"); 
}
html[data-theme="dark"] img.banner-tour {
   content: url("/banner-tour-dark.png"); 
}

html[data-theme="light"] img.banner-interactive {
   content: url("/banner-interactive-light.png"); 
}
html[data-theme="dark"] img.banner-interactive {
   content: url("/banner-interactive-dark.png"); 
}

html[data-theme="light"] img.banner-rosetta {
   content: url("/banner-rosetta-light.png"); 
}
html[data-theme="dark"] img.banner-rosetta {
   content: url("/banner-rosetta-dark.png"); 
}



html[data-theme="light"] img.vhs-better-errors-errmsg {
   content: url("/vhs-better-errors-errmsg-light.png"); 
}
html[data-theme="dark"] img.vhs-better-errors-errmsg {
   content: url("/vhs-better-errors-errmsg-dark.png"); 
}
